<template>
  <div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>药品管理</el-breadcrumb-item>
      <el-breadcrumb-item>出库账单</el-breadcrumb-item>
    </el-breadcrumb>
    <!--搜素-->
    <el-row >
<!--      <el-col :span="4">
        <el-date-picker
          v-model="begintime"
          size="small"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择开始日期"
        @change="search">
      </el-date-picker>
      </el-col>
      <el-col :span="0.5" :offset="1">
        &#45;&#45;
      </el-col>
      <el-col :span="4">
        <el-date-picker
            v-model="endtime"
            size="small"
            type="date"
            placeholder="选择结束日期"
            @change="search">
        </el-date-picker>
      </el-col>-->
      <el-col :span="8">
        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :unlink-panels="true"
            @change="setTime">
        </el-date-picker>
      </el-col>

      <el-col :span="6" :offset="3">
       长者： <el-input placeholder="长者姓名" clearable size="small" style="width: 200px;text-align: center;height: 25px;" v-model="olderName" readonly @click.native="innerVisible = true" />
<!--        <el-input placeholder="长者姓名" clearable v-model="olderName" disabled size="small" ></el-input>-->
      </el-col>
<!--      <el-col :span="3" :offset="0.1">
        <el-button type="primary" v-model="olderId" @click="innerVisible = true" size="small">
          点击选择长者
        </el-button>
      </el-col>-->
      <el-col :span="0.5">
        <el-button type="primary" @click="search" size="small">查询</el-button>
        <el-button type="primary" @click="searchall" size="small">选择全部</el-button>
      </el-col>

    </el-row>

    <!--展示-->
    <div>
      <template>
        <el-table
            :data="deliveryBillList"
            style="width: 100%"
            :row-class-name="tableRowClassName">
          <el-table-column prop="id" label="#" width="50px"></el-table-column>
          <el-table-column prop="deliveryVo.older.name" label="长者姓名" width="90px"></el-table-column>
          <el-table-column prop="medicine.drugnum" label="药品编号"></el-table-column>
          <el-table-column prop="medicine.drugname" label="药品名称"></el-table-column>
          <el-table-column prop="medicine.specification" label="规格"></el-table-column>
          <el-table-column prop="medicine.unit" label="单位"></el-table-column>
          <el-table-column prop="count" label="数量"></el-table-column>
          <el-table-column prop="medicine.saleprice" label="销售价（元）"></el-table-column>
          <el-table-column prop="sumPrice" label="金额（元）"></el-table-column>
          <el-table-column prop="desc" label="备注"></el-table-column>
          <el-table-column prop="createtime" label="购买日期"></el-table-column>
        </el-table>
      </template>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="pagelist"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>



  <!-- 长者信息对话框 -->
    <el-dialog
        width="75%"
        title="选择长者信息"
        :visible.sync="innerVisible"
        append-to-body>
      <el-input placeholder="请输入长者姓名" clearable v-model="olderName" @clear="searchOlder" style="width: 500px;margin-left: 50px;margin-bottom: 20px">
        <el-button slot="append" icon="el-icon-search" @click="searchOlder"></el-button>
      </el-input>
      <el-pagination
          @size-change="olderSizeChange"
          @current-change="olderCurrentChange"
          :current-page="olderPageNum"
          :page-sizes="[3, 6 , 12, 24]"
          :page-size="olderPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="olderTotal"
      ></el-pagination>
      <template>
        <el-table
            :data="olderList"
            style="width: 100%"
            :row-class-name="tableRowClassName"
        >
          <el-table-column
              label="编号"
              type="index"
              width="60">
          </el-table-column>
          <el-table-column
              prop="name"
              label="长者姓名"
              width="100">
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
              width="100">
          </el-table-column>
          <el-table-column
              prop="bed.bedname"
              label="床位号"
              width="100">
          </el-table-column>
          <el-table-column
              prop="idcard"
              label="长者身份证号"
              width="220">
          </el-table-column>
          <el-table-column
              prop="checkdate"
              label="入住日期"
              width="150">
          </el-table-column>
          <el-table-column
              label="在院状态"
              width="120"
          >
            <template slot-scope="scope">
              <span style="color: red" v-if="scope.row.status == 0">退房</span>
              <span style="color: green" v-if="scope.row.status == 1">入住</span>
              <span style="color: red" v-if="scope.row.status == 2">待退房</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  v-if="scope.row.status != 0"
                  @click="selectOlder(scope.row.id,scope.row.name)">选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DeliveryBill",
  data() {
    return {
      innerVisible:false,
      olderList:[],
      olderName:'',
      olderId:0,
      olderPageNum: 1,
      olderPageSize: 3,
      olderTotal: 0,

      dialogTableVisible:false,
      value1:'',
      begintime:new  Date(0),
      endtime:new Date(),
      pageNum: 1,
      pageSize: 6,
      pagelist: [2, 3, 6, 8],
      total: 0,
      deliveryBillList:[],
    }
  },
  methods: {

    //时间选择器（时间范围查询）
    setTime(picker){
      this.begintime=picker[0];
      this.endtime=picker[1];
      this.search();
    },
    /*searchTime(){
      this.begintime=new  Date(0);
      this.endtime=new  Date();
      this.search();
    },*/
//选择长者
    selectOlder(id, name) {
      this.olderId = id;
      this.olderName = name;
      this.innerVisible = false;
      this.search();
    },
    handleSizeChange(newSize) {
      this.pageNum = 1;
      this.pageSize = newSize;
      this.initBillList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initBillList();
    },
    search() {
      this.pageNum = 1;
      this.initBillList();
    },

    searchall(){
      this.olderName="";
      this.olderId=0;
      this.begintime=new  Date(0),
      this.endtime=new Date(),
      this.initBillList();
    },

    initBillList() {
     /* if(this.begintime==null){
        this.begintime=new  Date(0);
      }
      if(this.endtime==null){
        this.endtime=new  Date();
      }*/
      this.$axios.get("/deliveryBill/search", {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          olderId: this.olderId,
          beginTime:this.begintime,
          endTime:this.endtime
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.deliveryBillList = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },

    tableRowClassName({rowIndex}) {
      if (rowIndex === 0) {
        return 'white-row'; // 第一行为白色
      } else if (rowIndex % 4 === 1) {
        return 'warning-row'; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 2 === 0) {
        return ''; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 3 === 2) {
        return 'white-row'; // 第三行和每隔三行后的行为白色
      } else {
        return 'success-row'; // 每隔三行后的行为黄色
      }
    },

    //改变长者条数查询
    olderSizeChange(size) {
      this.olderPageSize = size;
      this.olderPageNum = 1;
      this.initOlderList();
    },
    //改变长者页数查询
    olderCurrentChange(now) {
      this.olderPageNum = now;
      this.initOlderList();
    },
    //长者内置搜收框
    searchOlder() {
      this.olderPageNum = 1;
      this.initOlderList();
    },
    //初始化长者信息
    initOlderList() {
      let url = "/Older/list"
      this.$axios.get(url, {
        params: {
          name: this.olderName,
          now: this.olderPageNum,
          size: this.olderPageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.olderList = res.data.data.list;
          this.olderPageNum = res.data.data.pageNum;
          this.olderPageSize = res.data.data.pageSize;
          this.olderTotal = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
  },
  created() {
    this.initBillList();
    this.initOlderList();
  },

}
</script>

<style scoped>
.input-with-select {
  background-color: #fff;
  color: #2d3a4b;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
